<template>
  <div class="search-result-page">
        <div v-if="searchResults.length > 0" class="search-results">
          <el-row style="margin-left:-10px;">
            <el-col :span="3" v-for="(result, index) in searchResults":key="result.id" :offset="index > 0 ? 2 : 0">
              <el-card :body-style="{ padding: '0px' }" class="shopcard">
                <img :src="result.imgLink" class="image">
                <div style="padding: 14px;">
                  <div class="bottom clearfix">
                    <span>{{ result.goodsInfo.name }}</span><br/><br/>
                    <span>单位：{{ result.goodsInfo.unit }}</span><br/><br/>
                    <span>价格：{{ result.goodsInfo.price }}￥</span><br/><br/>
                    <el-button type="text" class="button" @click="buyNow(result)">查看商品</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
      <!---分页组件-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="pageSizeList"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <div v-else class="no-results">
      <p>暂无此商品</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResults: [],
      //当前页号
      pageNo: 1,
      // 当前页大小
      pageSize:5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [5, 10, 20],
    };
  },
  methods: {
    // 表单查询
    search() {
      // 查询
      this.pageNo = 1
      this.searchGoods()
    },
    // 页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.searchGoods()
    },

    // 页号改变
    handleCurrentChange(val) {
      this.pageNo = val
      // 重新查询
      this.searchGoods()
    },
    async searchGoods() {
      const {data: res}= await this.$http.post(`/goodsInfo/selGoods/${this.keyword}/${this.pageNo}/${this.pageSize}`)
      this.searchResults = res.rows
      console.log(res)
      this.total =res.total
    },
    async buyNow(result) {
      // 跳转到商品详情页，并传递商品信息
      if(result.goodsInfo.id) {
        let id = result.goodsInfo.id;
        this.$router.push('/goods/'+ id);
      }
    }
  },
  created() {
    this.keyword = this.$route.params.keyword;
    this.searchGoods();
  }
};
</script>

<style>
.search-results {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.no-results {
  font-size: 18px;
  color: #999;
}

/* 商品推荐 */
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 4%;
  padding-top: 1px;
  float: right;
}

.image {
  width: 250px;
  height: 230px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.shopcard{
  width: 250px;
  height: 350px;
  margin-left: 20px;
  transition: transform 0.3s, opacity 0.3s; /* 添加过渡效果 */

}

.shopcard:hover{
  transform: scale(1.1); /* 缩放卡片至 1.1 倍大小 */
}
</style>